import { useEffect } from 'react';

import DataTypeComponent from './DataTypeComponent';

/**
 * 参数项接口
 */
interface ParamItem {
  id?: string;
  name: string; // 参数名称
  identifier: string; // 标识符
  dataType: string; // 数据类型
  // 数据类型相关字段
  domains?: any[];
  boolT?: string;
  boolF?: string;
  dataLen?: string;
  dataLenUnit?: string;
  arrayDataType?: string;
  len?: string;
  min?: string;
  max?: string;
  step?: string;
  unit?: string;
  dateFormat?: string;
}

/**
 * 参数Modal组件属性
 */
interface ParamModalProps {
  visible: boolean;
  editingParam: ParamItem | null;
  onSave: (param: ParamItem) => void;
  onCancel: () => void;
}

/**
 * 参数编辑Modal组件
 */
const ParamModal = ({ visible, editingParam, onSave, onCancel }: ParamModalProps) => {
  const [form] = AForm.useForm();
  const dataType = AForm.useWatch('dataType', form);

  // 当Modal打开时，设置表单初始值
  useEffect(() => {
    if (visible) {
      if (editingParam) {
        // 编辑模式：设置现有数据
        form.setFieldsValue(editingParam);
      } else {
        // 添加模式：重置表单
        form.resetFields();
      }
    }
  }, [visible, editingParam, form]);

  // 处理保存
  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      onSave(values);
    } catch (error) {
      console.error('表单验证失败:', error);
    }
  };

  // 处理取消
  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  return (
    <AModal
      title={editingParam ? '编辑参数' : '添加参数'}
      open={visible}
      onOk={handleSave}
      onCancel={handleCancel}
      width={800}
      okText="保存"
      cancelText="取消"
    >
      <AForm form={form} layout="vertical" style={{ marginTop: 16 }}>
        <ARow gutter={16}>
          {/* 参数名称 */}
          <ACol span={24}>
            <AForm.Item
              name="name"
              label="参数名称"
              rules={[{ required: true, message: '请输入参数名称' }]}
            >
              <AInput placeholder="请输入参数名称" />
            </AForm.Item>
          </ACol>

          {/* 标识符 */}
          <ACol span={24}>
            <AForm.Item
              name="identifier"
              label="标识符"
              rules={[{ required: true, message: '请输入标识符' }]}
            >
              <AInput placeholder="请输入标识符" />
            </AForm.Item>
          </ACol>

          {/* 数据类型组件 */}
          <DataTypeComponent form={form} dataType={dataType} />
        </ARow>
      </AForm>
    </AModal>
  );
};

export default ParamModal;
